<template>
  <h2>readonly和shallowReadonly</h2>
  <h3>state:{{state}}</h3>
  <button @click="update">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly} from 'vue';
export default defineComponent({
  name: 'App',
  setup(){
    const state=reactive({
      name:"kangroo",
      age:20,
      car:{
        name:"宝马",
        color:"red",
      }
    })
    // const state2=readonly(state)//只读数据，深度只读
    const state2=shallowReadonly(state)//只读数据，浅度只读
    const update=()=>{
      console.log('测试');
      // state2.name='999' //报错，不可更新，只读数据，深度只读
      state2.car.name='000'
    }
    return{
      state,
      update
    }
  }
});
</script>